<template>
	<view>
		<van-field v-model="title" label="标题" placeholder="请输入" input-align="right" />
		<van-field v-model="taskNo" label="外事任务编号" placeholder="请输入" input-align="right" />
		<van-field v-model="name" label="呈报人" is-link input-align="right" />
		<van-field v-model="dept" label="呈报单位" is-link input-align="right" />
		<van-cell title="起止日期" is-link :value="date" @click="showdateRange = true" />
		<van-calendar v-model="showdateRange" type="range" :min-date="minDate" :max-date="maxDate"
			@confirm="onConfirmDate" color="#1989fa" />
		<van-cell is-link title="公文类型" v-model="docType" @click="showDocType = true" />
		<van-action-sheet round v-model="showDocType" :actions="docTypeList" cancel-text="取消"
			@select="onSelectDocType" />
		<view class="padding-top-lg padding-bottom-lg">
			<van-row type="flex" justify="space-around">
				<van-col span="10">
					<van-button type="info" round plain hairline block @click="toClose">重置</van-button>
				</van-col>
				<van-col span="10">
					<van-button type="info" round block @click="onConfirm">确定</van-button>
				</van-col>
			</van-row>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				name: '',
				dept: '',
				date: '',
				showdateRange: false,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2030, 11, 31),
				docType: '请选择',
				showDocType: false,
				docTypeList: [{
						name: '全部',
						value: 0
					},
					{
						name: '发文（函）',
						value: 1
					},
					{
						name: '呈批件',
						value: 2
					},
					{
						name: '发电',
						value: 3
					},
					{
						name: '分阅单',
						value: 4
					},
					{
						name: '传阅单',
						value: 5
					},
					{
						name: '分办单',
						value: 6
					},
					{
						name: '办理单',
						value: 7
					},
					{
						name: '注办单',
						value: 8
					},
					{
						name: '总局外来文',
						value: 9
					},
					{
						name: '发电抄阅',
						value: 10
					},
				],
				taskNo: '',


			};
		},
		methods: {
			onSelectDocType(item) {
				this.docType = item.name
				this.showDocType = false
			},
			formatDate(date) {
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirmDate(date) {
				const [start, end] = date;
				this.showdateRange = false;
				this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			},
			onConfirm() {
				this.$emit('filterToggle','item');
			}

		},
	};
</script>

<style scoped>
	.van-cell__title {
		min-width: 50%;

		span {
			display: inline-block;
			text-align: left;
			word-break: break-all;
		}
	}

	/deep/ .van-field__label {
		color: #323233;
		min-width: 30%;

		span {
			display: inline-block;
			text-align: left;
			word-break: break-all;
		}
	}

	/deep/ .van-field__control {
		font-size: 14px;
		color: #969799;
	}
</style>
